<script lang="ts" setup name="Drawer">
import { propTypes } from '@/utils/propTypes'

const slots = useSlots()

const props = defineProps({
  modelValue: propTypes.bool.def(false),
  title: propTypes.string.def('Dialog'),
  size: propTypes.oneOfType([String, Number]).def('40%'),
  type: propTypes.string.def('default') // 弹窗类型：default（默认）| card（卡片，需设置高度，不使用弹窗的滚动条） | scroll（滚动条，需设置高度，使用弹窗的滚动条）
})

const getBindValue = computed(() => {
  const delArr: string[] = ['title', 'appendToBody']
  const attrs = useAttrs()
  const obj = { ...attrs, ...props }
  for (const key in obj) {
    if (delArr.indexOf(key) !== -1) {
      delete obj[key]
    }
  }
  return obj
})
</script>

<template>
  <ElDrawer v-bind="getBindValue" :close-on-click-modal="true" :size="size" destroy-on-close lock-scroll class="com-drawer" :show-close="false">
    <template #header="{ close }">
      <div class="relative h-32px flex items-center">
        <slot name="title">
          {{ title }}
        </slot>
        <div class="absolute right-0px top-[50%] h-32px flex translate-y-[-50%] items-center justify-between">
          <SvgIcon class="is-hover cursor-pointer" icon="ep:close" color="var(--el-color-info)" @click="close" />
        </div>
      </div>
    </template>
    <slot v-if="type=== 'default'" />
    <div v-else class="abs-pane">
      <ElScrollbar v-if="type==='scroll'">
        <slot />
      </ElScrollbar>
      <slot v-else />
    </div>
    <template v-if="slots.footer" #footer>
      <slot name="footer" />
    </template>
  </ElDrawer>
</template>

<style lang="scss">
.com-drawer {

  .#{$elNamespace}-overlay-drawer {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  &.#{$elNamespace}-drawer {

    .#{$elNamespace}-drawer__header {
      padding: 12px var(--el-space);
      margin-right: 0 !important;
      margin-bottom: 0;
      font-size: 16px;
      border-bottom: 1px solid var(--el-border-color-lighter);

      .el-icon {
        &:hover {
          color: var(--el-color-primary) !important;
        }
      }
    }

    .#{$elNamespace}-drawer__body {
      position: relative;
      display: flex;
      flex-direction: column;
      padding: 0 !important;
      border: none;

      .abs-pane{
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        flex-direction: column;
        width: 100%;
        height: 100%;

        >.el-scrollbar{
          position: absolute;
          top: 0;
          left: 0;
          display: flex;
          width: 100%;
          height: 100%;

          >.el-scrollbar__wrap {
            width: 100%;
          }
        }
      }
    }

    .#{$elNamespace}-drawer__footer {
      padding: 0;
      margin-top: var(--el-space);
      border-top: none;
    }
  }
}
</style>
